{% extends "base.html" %}


{% block content %}

<h1>摘要</h1>
CSS Shapes布局可以实现不规则的文字环绕效果，需要和浮动配合使用

<h1>Shapes布局相关属性</h1>

<dl>
    <dt></dt>
    <li>shape-outside</dd>
    <li>shape-margin</dd>
    <li>shape-image-threshold</dd>
</dl>

<h1>shape-outside</h1>
<dl>
    <dt>shape-outside是不规则形状环绕布局的核心</dt>
    <dd>属性值分为如下四大类</dd>
    <dd>
        <li>none – 默认值</li>
    </dd>
    <dd>
        <li>&lt;shape-box&gt; – 图形盒子</li>
        <dd>margin-box，border-box，padding-box和content-box。</dd>
        <dd>要来指定文字环绕的时候是依照哪个盒子的边缘来计算</dd>
    </dd>
    <dd>
        <li>&lt;basic-shape&gt; – 基本图形函数</li>
        <dd>基本形状函数，和CSS clip-path剪裁属性支持的基本形状函数一模一样</dd>
    </dd>
    <dd>
        <li>&lt;image&gt; – 图像类</li>
        <dd>值是图像类，包括URL链接图片，渐变图像，cross-fade()，element(), CSS3 mask遮罩属性也都支持</dd>
    </dd>
    <pre class="language-css line-numbers">
        <code>
            /* 不同类型属性值使用示意（取自MDN）： */
            /* 关键字值 */
            shape-outside: none;
            shape-outside: margin-box;
            shape-outside: content-box;
            shape-outside: border-box;
            shape-outside: padding-box;

            /* 函数值 */
            shape-outside: circle();
            shape-outside: ellipse();
            shape-outside: inset(10px 10px 10px 10px);
            shape-outside: polygon(10px 10px, 20px 20px, 30px 30px);

            /* &lt;url&gt; 值 */
            shape-outside: url(image.png);

            /* 渐变值 */
            shape-outside: linear-gradient(45deg, rgba(255, 255, 255, 0) 150px, red 150px);
        </code>
    </pre>
</dl>
<h2>关键字属性值</h2>
<div class="check-group">
    <input type="radio" name="shape" id="shape-attr-none" value="none" checked>
    <label for="shape-attr-none">none</label>
    <input type="radio" name="shape" value="margin-box">
    <label for="shape-attr-margin-box">margin-box</label>
    <input type="radio" name="shape" value="border-box">
    <label for="shape-attr-border-box">border-box</label>
    <input type="radio" name="shape" value="padding-box">
    <label for="shape-attr-padding-box">padding-box</label>
    <input type="radio" name="shape" value="content-box">
    <label for="shape-attr-content-box">content-box</label>
</div>

    <span class="shape"></span>
    <p>在CSS Shapes布局问世之前，文字像杂志一样的任意形状的排版几乎是不可能的，一直都是用网格、盒子和直线构造。

        CSS Shapes允许我们定义文本环绕的几何形状。这些形状可以是圆、椭圆、简单或复杂的多边形，甚至是任意的图像和多彩的渐变。</p>

<pre class="language-css line-numbers">
    <code>
        .shape {
            float: left;
            width: 60px;
            height: 60px;
            padding: 10px;
            margin: 10px;
            border: 10px solid greenyellow;
            border-radius: 50%;
            background-color: currentColor;
            background-clip: content-box;
            color: #cd0000;
          }
          
    </code>
</pre>


<h2 style="clear: both;">基本的形状函数</h2>
<h3>circle</h3>

<span class="semi-circle" style="clear: left;">semi-circle</span>
<p>
    和关键字属性值加border-radius实现的圆形环绕相比，circle()得实现相对更加灵活一些，比方说想弄一个半圆的环绕效果
    其中问号?是正则表达式中的特殊字符，表示0和1，也就是说shape-radius（圆半径）和position（圆心位置）都是可以缺省的
</p>

<pre class="language-css line-numbers">
    <code>
        circle( [ &lt;shape-radius&gt; ]? [at &lt;position&gt; ]? )
        shape-outside: circle();
        shape-outside: circle(50%);
        shape-outside: circle(at 50% 50%);
        shape-outside: circle(50% at 50% 50%);
        shape-outside: circle(50px at 50px 50px);
        /* 半圆的环绕效果 */
        shape-outside: circle(50% at 0% 50%); 

        .semi-circle {
            float: left;
            width: 150px;
            height: 150px;
            /* margin: 20px; */
            shape-outside: circle(50% at 0%);
            clip-path: circle(50% at 0%);
            background: lightblue;
            line-height: 150px;
            color:crimson;
        }
    </code>
</pre>


<h3>ellipse</h3>

<span class="ellipse">ellipse</span>

<p>
    x，y半径除了具体数值，还支持farthest-side和closest-side这两个关键字，顾名思义，分别表示到最长边的长度和最短边的长度
</p>

<pre class="language-css line-numbers">
    <code>
        ellipse( [ &lt;shape-radius&gt; {2}]? [at &lt;position&gt; ]? )
        /* x轴半径，y轴半径，以及椭圆的圆心位置。以下都是合法的： */
        shape-outside: ellipse();
        shape-outside: ellipse(50px 75px);
        shape-outside: ellipse(at 50% 50%);
        shape-outside: ellipse(50px 75px at 50% 50%);
        /* farthest-side和closest-side这两个关键字, 分别表示到最长边的长度和最短边的长度 */
        ellipse(farthest-side closest-side at 25% 25%)


        .ellipse {
            float: left;
            width: 150px;
            height: 150px;
            shape-outside: ellipse(50px 75px at 50% 50%);
            clip-path: ellipse(50px 75px at 50% 50%);
            background-color: cyan;
            /* line-height: 70; */
            color: darkorange;
            clear: both;
        }
    </code>
</pre>


<h3>inset–内矩形</h3>
<span class="inset">inset</span>
<p>shape-arg是必须参数，可以是1~4个值。
    当提供所有前四个参数时，它们表示从参考框<b>向内</b>的顶部，右侧，底部和左侧<b>偏移</b>，也就是<b>定义</b>了插入的<b>矩形的边缘位置</b>。 
    这些参数遵循边距缩写的语法（类似margin、padding等属性），
    我们可以使用1个，2个，3个或4个值。border-radius表示圆角大小，可以缺省。</p>
<pre class="language-css line-numbers">
    <code>
        inset( &lt;shape-arg&gt; {1,4} [round &lt;border-radius&gt; ]? )
        shape-outside: inset(10px);
        shape-outside: inset(10px 20px);
        shape-outside: inset(10px 20px 30px);
        shape-outside: inset(10px 20px 30px 40px);
        shape-outside: inset(10px 20px 30px 40px round 10px);


        .inset {
            float: left;
            width: 150px;
            height: 150px;
            shape-outside: inset(10px 20px 30px 40px round 70px);
            clip-path: inset(10px 20px 30px 40px round 70px);
            background-color: cyan;
            line-height: 70;
            color: darkorange;
            clear: both;
        }
    </code>
</pre>



    <h3>polygon多边形</h3>
    <span class="polygon">polygon</span>
    <p>
        fill-rule表示填充规则，可以是nonzero以及evenodd，默认值是nonzero。
        这两个填充规则是图形领域必须要掌握的基础知识，可以参见文章“搞懂SVG/Canvas中nonzero和evenodd填充规则”进行学习。
    </p>
    <pre class="language-css line-numbers">
        <code>
            polygon( [<fill-rule>,]? [<shape-arg> <shape-arg>]# )
            polygon( x1 y1, x2 y2, x3 y3, ... )
            shape-outside: polygon(0 0, 0 100px, 100px 200px);
            shape-outside: polygon(0 0, 100px 0, 0 50px, 100px 100px, 0 100px);



            .polygon {
                float: left;
                width: 150px;
                height: 150px;
                shape-outside: polygon(0 0, 100px 0, 0 50px, 100px 100px, 0 100px);
                clip-path: polygon(0 0, 100px 0, 0 50px, 100px 100px, 0 100px);
                background-color: cyan;
                line-height: 70;
                color: darkorange;
                clear: both;
                
            }
        </code>
    </pre>



<h1>图像类</h1>
<h2>URL不规则图形</h2>
<span class="image-shape">image-shape</span>
<p style="width: 500px;">
在CSS Shapes布局问世之前，文字像杂志一样的任意形状的排版几乎是不可能的，一直都是用网格、盒子和直线构造。

CSS Shapes允许我们定义文本环绕的几何形状。这些形状可以是圆、椭圆、简单或复杂的多边形，
甚至是任意的图像和多彩的渐变。

例如这里，使用半透明图像的 url 来定义形状，这样文本就会自动环绕它。
重要的是要注意图像使用必须要兼容 CORS（不要跨域，或者服务器设置'Access-Control-Allow-Origin'），
否则会出错，而没有环绕效果。
</p>


<pre class="language-css line-numbers">
    <code>
        /* 在Css文件中写的代码，当前文件位置是代码所在的css文件的位置  */
        .image-shape {
            --image-path: "../images/birds.png";
            float: left;
            width: 200px; height: 300px;
            /* 文字环绕这个鹦鹉 */
            shape-outside: url("../images/birds.png");
            /* 鹦鹉赋色并显示 */
            background-color: #cd0000;
            -webkit-mask: url("../images/birds.png") no-repeat;
            mask: url("../images/birds.png") no-repeat;
        }
    </code>
</pre>

<h2 style="clear: both;">gradient渐变与环绕</h2>
<span class="graient-shape">gradient渐变与环绕</span>

<p>这里的渐变可以是线性渐变也可以是径向渐变，以及repeat渐变。

    例如绘制斜向线性渐变<br>
    这里的渐变可以是线性渐变也可以是径向渐变，以及repeat渐变。

    例如绘制斜向线性渐变
    这里的渐变可以是线性渐变也可以是径向渐变，以及repeat渐变。

    例如绘制斜向线性渐变
    这里的渐变可以是线性渐变也可以是径向渐变，以及repeat渐变。

    例如绘制斜向线性渐变
    这里的渐变可以是线性渐变也可以是径向渐变，以及repeat渐变。

    例如绘制斜向线性渐变</p>

<pre class="language-css line-numbers">
    <code>
        .graient-shape {
            float: left;
            width: 150px; height: 120px;
            --gradient: linear-gradient(to right bottom, #cd0000, transparent 50%, transparent 90%, #cd0000);
            shape-outside: var(--gradient);
            background: var(--gradient);
        }
    </code>
</pre>



<h2>shape-margin</h2>
<p>shape-margin很好理解，就是文字环绕图形时候，距离边界的位置，这个属性很有用。
    因为在Shape布局中，文字环绕有时候是无视margin属性的，想要撑开间距，多半还得用shape-margin属性。</p>
    <p>虽然该属性包含了margin，但是行为表现和CSS的margin属性却有很大的差别。
        首先，shape-margin只支持1个值，margin则1~4个；
        然后<b>shape-margin的有效数值范围是有限制</b>的，从0到浮动元素的边界（此时布局效果表现如同普通浮动布局）。</p>
    
    <image src="../static/images/shape-margin.gif"></image>

    <pre class="language-css line-numbers">
        <code>
            /* 长度值 */
            shape-margin: 10px;
            shape-margin: 20mm;
            
            /* 百分比值 */
            shape-margin: 60%;
        </code>
    </pre>


<h1>shape-image-threshold</h1>

<!-- <image src="../static/images/shape-image-threshold.gif"></image> -->


<div class="check-group">
    <input type="radio" name="threshold" id="shape-attr-none" value="0.0" checked>
    <label for="shape-attr-none">0.0</label>
    <input type="radio" name="threshold" value="0.3">
    <label for="shape-attr-margin-box">0.3</label>
    <input type="radio" name="threshold" value="0.6">
    <label for="shape-attr-border-box">0.6</label>
    <input type="radio" name="threshold" value="0.8">
    <label for="shape-attr-padding-box">0.8</label>
    <input type="radio" name="threshold" value="1.0">
    <label for="shape-attr-content-box">1.0</label>
</div>

<span class="shape-image-threshold">shape-image-threshold</span>
<p>threshold这个单词是“阈(yu)值”的意思，shape-image-threshold指图像环绕时候的半透明阈值，
    <br>默认是0.0，也就是图像透明度为0的区域边界才能环绕。
    <br>同理，如果值是0.5表示透明度小于0.5的区域都可以文字环绕。

    <br>这个属性也非常实用，也很好理解，例如，我们写一个实色到透明的倾斜线性渐变，则从0~1的透明度都覆盖到了，
    此时，不同的shape-image-threshold值则会产生不同的布局变化</p>

<pre class="language-css line-numbers">
    <code>
        .shape-image-threshold {
            float: left;
            width: 200px; height: 120px;
            --gradient: linear-gradient(145deg, #cd0000, transparent);
            background: var(--gradient);
            shape-outside: var(--gradient);
            transition: shape-image-threshold .3s;
        }
    </code>
</pre>


{% endblock content %}